<template>
	<div class="nurse_form">
		<span class="tittle">康恒医院添加护士信息</span>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width:500px"
			class="demo-ruleForm">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="ruleForm.name"></el-input>
			</el-form-item>
			<el-form-item label="地址" prop="address">
				<el-input v-model="ruleForm.address"></el-input>
			</el-form-item>
			<el-form-item label="年龄" prop="age">
				<el-input v-model="ruleForm.age"></el-input>
			</el-form-item>
			<el-form-item label="职称" prop="position">
				<el-input v-model="ruleForm.position"></el-input>
			</el-form-item>
			<el-form-item label="专业" prop="profession">
				<el-input v-model="ruleForm.profession"></el-input>
			</el-form-item>
			<el-form-item label="科室" prop="department">
				<el-select style="width: 130px" placeholder="请选择科室" v-model="ruleForm.department">
					<el-option v-for="item in shiftListOffice" :key="item.id" :label="item.text" :value="item.text">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="学历" prop="education">
				<el-select v-model="ruleForm.education" placeholder="请选择学历">
					<el-option label="中专学历" value="中专学历"></el-option>
					<el-option label="专科学历" value="专科学历"></el-option>
					<el-option label="本科学历" value="本科学历"></el-option>
					<el-option label="硕士学位" value="硕士学位"></el-option>
					<el-option label="博士学位" value="博士学位"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="入职时间" required>
				<el-col :span="11">
					<el-form-item prop="date">
						<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-radio-group v-model="ruleForm.sex">
					<el-radio label="1">男</el-radio>
					<el-radio label="2">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm()">提交</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script type="text/ecmascript-6">
	import {
		t
	} from 'element-ui/lib/locale';

	export default {
		data() {
			return {
				ruleForm: {//新增的数据
					name: '',
					address: '',
					sex: "1",
					age: '',
					position: '',
					department: '',
					education: '',
					profession: '',
					date: ''
				},
				shiftListOffice: [],//所有科室信息
				// 验证规则
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 5,
							message: '长度在3到5个字符',
							trigger: 'blur'
						}
					],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
					age: [{
							required: true,
							message: '请输入年龄',
							trigger: 'blur'
						}
						// {type: 'number', message: '年龄必须为数字值'}
					],
					position: [{
						required: true,
						message: '请输入职称',
						trigger: 'blur'
					}],
					profession: [{
						required: true,
						message: '请输入专业',
						trigger: 'blur'
					}],
					department: [{
						required: true,
						message: '请选择所在的科室',
						trigger: 'change'
					}],
					education: [{
						required: true,
						message: '请选择学历',
						trigger: 'change'
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}],
					date: [{
						type: 'date',
						required: true,
						message: '请选择入职时间',
						trigger: 'change'
					}]
				}
			};
		},
		methods: {
			// 提交
			submitForm() {
				let apilogin = "http://localhost:8088/insertNurse"
				this.$http.post(apilogin,
					this.ruleForm
				).then((response) => {
					this.$message({
						message: '护士新增成功！',
						type: 'success'
					});
				}, response => {
					console.log(this.ruleForm)
					this.$message({
						message: '护士新增失败',
						type: 'error'
					});
				})
			},
			// 重置
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
		created() {//查询所有科室
			let that = this;
			let API = "http://localhost:8088/getDepartment";
			this.$http.get(API).then((response) => {
				that.shiftListOffice = [...response.body];
			});
		}
	};
</script>

<style>
	.nurse_form .el-input {
		width: 384px;
	}

	.nurse_form .tittle {
		display: block;
		text-align: center;
		font-size: 24px;
		line-height: 80px;
	}

	.nurse_form .demo-ruleForm {
		width: 470px;
		margin: auto;
	}
</style>